<template>
	<div>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="nickName" label="用户名称" width="180">
			</el-table-column>
			<el-table-column prop="phone" label="手机号" width="180">
			</el-table-column>
			<el-table-column prop="num" label="笔数" width="180">
			</el-table-column>
			<el-table-column prop="balance" label="余额" width="180">
				<template slot-scope="scope">
					{{scope.row.balance / 100}}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="180">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="goDetail(scope.$index, scope.row)">详情</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<pagination-direction v-if="paginationConfig.total !== 0" :config="paginationConfig" @sizeschange="sizesChange"
			@pagechange="pageChange" />
	</div>
</template>


<script>
	import {
		getWalletUsertDetails
	} from '@/api/UserCenter';
	export default {
		data() {
			return {
				// 分页配置
				paginationConfig: {
					direction: 'center', // 分页位置
					layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
					pageSizes: [10, 20], // 分页pages
					total: 0,
					page: 1, // 页数-默认1
					pageSize: 10 // 每页条数-默认10
				},
				tableData: []
			}
		},
		mounted() {
			this.initData();
		},
		methods: {
			initData() {
				let params = {
					pageNum: this.paginationConfig.page,
					pageSize: this.paginationConfig.pageSize
				}
				getWalletUsertDetails(params).then(res => {
					this.tableData = res.data.list
					this.paginationConfig.total = res.data.total
				})
			},
			// 分页sizes改变
			sizesChange() {
				this.initData();
			},
			// 分页page改变
			pageChange() {
				this.initData();
			},
			// 跳转详情
			goDetail(index, row) {
				this.$router.push({
					name: 'detail',
					query: {
						customerId: row.pubDomainCustomerId
					}
				});
			},
		}
	}
</script>
